<template>
	<view class="tab-bar-container">
		<view class="tab-bar-placeholder"></view>
		<view class="float-tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabList" 
				:key="index" 
				@tap="switchTab(tab)"
				:class="{ active: activeTab === tab.id }"
			>
				<text class="tab-icon">{{ tab.icon }}</text>
				<text class="tab-text">{{ tab.name }}</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'TabBar',
	props: {
		activeTab: {
			type: String,
			default: 'home'
		}
	},
	data() {
		return {
			safeAreaBottom: 0,
			tabList: [
				{
					id: 'home',
					name: '首页',
					icon: '🏠',
					route: '/moneyManage/index/index'
				},
				{
					id: 'record',
					name: '记账',
					icon: '📝',
					route: '/moneyManage/record/record'
				},
				{
					id: 'statistics',
					name: '统计',
					icon: '📊',
					route: '' // 待完成路径
				},
				{
					id: 'mine',
					name: '我的',
					icon: '👤',
					route: '/moneyManage/mine/mine'
				}
			]
		}
	},
	mounted() {
		// 获取安全区域底部高度
		uni.getSystemInfo({
			success: (res) => {
				if (res.safeAreaInsets) {
					this.safeAreaBottom = res.safeAreaInsets.bottom;
				}
			}
		});
	},
	methods: {
		switchTab(tab) {
			if (tab.id === this.activeTab) return;
			
			if (tab.route) {
				// 使用 redirectTo 替换当前页面，避免页面堆叠
				uni.redirectTo({
					url: tab.route,
					fail: (err) => {
						console.error('导航失败:', err);
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						});
					}
				});
			} else {
				uni.showToast({
					title: '该功能正在开发中',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-bar-container {
	width: 100%;
	position: relative;
	height: 150upx;
}

.tab-bar-placeholder {
	height: 150upx; // 确保底部有足够空间
	width: 100%;
}

.float-tab-bar {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
	padding: 15rpx 20rpx;
	z-index: 999;
	width: 90%;
	max-width: 600rpx;
	backdrop-filter: blur(10rpx);
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		position: relative;
		transition: all 0.3s;
		min-width: 120rpx;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 2rpx;
			left: 50%;
			transform: translateX(-50%) scale(0);
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: #007aff;
			transition: transform 0.3s;
		}
		
		&.active {
			.tab-icon {
				color: #007aff;
				transform: translateY(-2rpx);
			}
			
			.tab-text {
				color: #007aff;
				font-weight: bold;
			}
			
			&::after {
				transform: translateX(-50%) scale(1);
			}
		}
		
		.tab-icon {
			font-size: 42rpx;
			margin-bottom: 4rpx;
			transition: all 0.3s;
		}
		
		.tab-text {
			font-size: 22rpx;
			color: #999;
			transition: all 0.3s;
		}
	}
	
	.safe-area-inset-bottom {
		width: 100%;
		// height: var(--safe-area-inset-bottom, 0);
		flex: 0 0 100%;
	}
}

// @supports (padding-bottom: constant(safe-area-inset-bottom)) {
// 	.float-tab-bar {
// 		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
// 	}
// }

// @supports (padding-bottom: env(safe-area-inset-bottom)) {
// 	.float-tab-bar {
// 		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
// 	}
// }
</style> 